import React, { CSSProperties } from 'react'
import { Button, Row, Col } from 'antd'
import { openDebug } from 'render/utils/ipcUtils'
import cs from 'classnames'
import styles from './index.module.scss'
import commonStyles from 'render/styles/common.module.scss'

interface Props {
    item: DebugItem
    rootStyles?: CSSProperties
}

const ListItem: React.FC<Props> = ({ item, rootStyles }) => {
    return (
        <div className={styles.item_wrap} style={rootStyles}>
            <Row gutter={[0, 50]}>
                <Col  span={3}>
                    <div className={cs(commonStyles.text_align_right)}>标题：</div>
                </Col>
                <Col span={20}>
                    <div className={cs(commonStyles.work_break)}>{ item.title }</div>
                </Col>
            </Row>
            <Row gutter={[0, 50]} className={commonStyles.mt_10}>
                <Col span={3}>
                    <div className={cs(commonStyles.text_align_right)}>类型：</div>
                </Col>
                <Col span={20}>
                    <div className={cs(commonStyles.work_break)}>{ item.type }</div>
                </Col>
            </Row>
            <Row gutter={[0, 50]} className={commonStyles.mt_10}>
                <Col span={3}>
                    <div className={cs(commonStyles.text_align_right)}>路径：</div>
                </Col>
                <Col span={20}>
                    <div className={cs(commonStyles.work_break)}>{ item.url }</div>
                </Col>
            </Row>
            <Row gutter={[0, 50]} className={commonStyles.mt_10}>
                <Col span={3}>
                    <div className={cs(commonStyles.text_align_right)}>调试路径：</div>
                </Col>
                <Col span={20}>
                    <div className={cs(commonStyles.work_break)}>{ item.devUrl }</div>
                </Col>
            </Row>

            <div className={styles.btn_handle}>
                <Button onClick={() => openDebug(item.devUrl)} type="link">打开调试</Button>
            </div>
        </div>
    )
}

export default ListItem